<template>
  <view class="tabs-block">
    <view class="tabs-block__header">
      <!-- 背景滑块 -->
      <view 
        class="tabs-block__slider"
        :style="{
          transform: `translateX(${100 * value}%)`,
          width: `${100/tabs.length}%`
        }"
      ></view>
      
      <!-- tab项 -->
      <view 
        v-for="(item, index) in tabs" 
        :key="index"
        class="tabs-block__item"
        :class="{'tabs-block__item--active': value === index}"
        @click="handleTabClick(index)"
      >
        {{ item.title }}
      </view>
    </view>
    
    <view class="tabs-block__content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-tabs-block',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleTabClick(index) {
      if (this.value === index) return
      this.$emit('input', index)
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-block {
  width: 100%;
  
  &__header {
    position: relative;
    display: flex;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 6rpx;
    margin: 0 20rpx;
  }
  
  &__item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    transition: color 0.3s;
    
    &--active {
      color: #ffffff;
    }
  }
  
  &__slider {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 6rpx;
    background-color: #2979ff;
    border-radius: 8rpx;
    transition: all 0.3s ease-in-out;
    z-index: 0;
  }
  
  &__content {
    padding: 20rpx;
  }
}
</style> 